// 引入样式
import { useEffect, useRef, useState } from 'react';
import styles from './index.module.less';
import MiniBpmn from '@/components/MiniBpmn';
import MiniBpmnService from '@/components/MiniBpmn/service';
import ImportBpmn from '@/components/MiniBpmn/components/ImportBpmn';
import { proxy } from 'valtio';
import { Button, message, Divider, Space } from 'szcd';
import Panel from '@/components/MiniBpmn/components/Panel';
import TemplateModeFork from '@/components/TemplateModeFork';
import { ArrowLeftOutlined } from '@ant-design/icons';

const log = (...args: any) => {
  // console.log
};

function useService() {
  // MiniBpmnService以及内部的变更，热更新后，没有重新执行useState
  // 推测是react可能认为state内都是纯数据，所以不会重新执行useState
  // 但是这对于我们把业务逻辑

  // 判断热更新时，重新初始化service
  const isMountRef = useRef(true);
  const [bpmnService, setBpmnService] = useState(() => {
    log('useService useState');
    return proxy(new MiniBpmnService());
  });

  useEffect(() => {
    log('useService mount');
    if (!isMountRef.current) {
      log('useService reInit');
      setBpmnService(proxy(new MiniBpmnService()));
    }
    return () => {
      log('useService destroy');
      isMountRef.current = false;
      bpmnService.destroy();
    };
  }, []);

  return bpmnService;
}

export default function IndexPage() {
  const bpmnService = useService();
  const recovey = () => {
    const xml = localStorage.getItem('bpmnXml');
    if (xml) {
      bpmnService.loadXml(xml).then(() => {
        window.setTimeout(() => {
          bpmnService.modelName.onChange('21312');
        }, 1000);
      });
    } else {
      bpmnService.initMetaData({ id: '123123', name: '流程名称' });
      bpmnService.init();
    }
  };
  useEffect(() => {
    recovey();
  }, []);

  return (
    <TemplateModeFork
      rightboxStyle={{
        padding: '0px',
        height: '100%',
        position: 'relative',
      }}
      rightContentBoxProps_bottom={{ style: { height: '100%' } }}
      leftContentBoxProps={{ colSpan: '300px' }}
      title={
        <div>
          <Button
            onClick={() => {
              history.back();
            }}
            style={{ marginLeft: '-24px' }}
            icon={<ArrowLeftOutlined rev="" />}
            type="text"
          >
            返回
          </Button>
          <Divider type={'vertical'} />
          流程设计
        </div>
      }
      extra={
        <Space size={10}>
          <ImportBpmn
            onChange={(xml) => {
              bpmnService.loadXml(xml);
            }}
          />
          <Button
            type="primary"
            size={'small'}
            onClick={() => {
              bpmnService.toXml().then((xml) => {
                // message.success('导出成功');
                // eslint-disable-next-line no-console
                console.log(xml);
              });
            }}
          >
            输出
          </Button>
          <Button
            type="primary"
            size={'small'}
            onClick={() => {
              bpmnService.toXml().then((xml) => {
                if (xml) {
                  localStorage.setItem('bpmnXml', xml);
                  message.success('缓存成功');
                }
              });
            }}
          >
            缓存
          </Button>
          <Button
            type="primary"
            size={'small'}
            onClick={() => {
              recovey();
            }}
          >
            恢复
          </Button>

          <Button
            type="primary"
            size={'small'}
            onClick={() => {
              bpmnService.clear();
            }}
          >
            重置
          </Button>
          <Button
            type="primary"
            size={'small'}
            onClick={() => {
              bpmnService.saveXml().then(() => {
                message.success('导出成功');
              });
            }}
          >
            导出
          </Button>
          <Button
            onClick={() => {
              bpmnService.panel.show();
            }}
          >
            打开面板
          </Button>
        </Space>
      }
      PageContent={
        <>
          <MiniBpmn className={styles.editor} service={bpmnService} />
          <Panel className={styles.right} service={bpmnService.panel} />
        </>
      }
    />
  );
}
